<template>
	<u-popup :show="visible"  bgColor="transparent" mode="center">
		<view class="container-modal">
			<slot name='title'><view v-if="title" class="cont-title">{{title}}</view></slot>
			<slot>
				<view class="container-body">{{content}}</view>
			</slot>
			<slot name='footer'>
				<view v-if="showFooter" class="container-footer">
					<view v-if="showCancelButton" class="item-button" :style="{color:cancelColor}" @tap="onCancel">{{cancelText}}</view>
					<view v-if="showConfirmButton" class="item-button" :style="{color:confirmColor}" @tap="onConfirm">{{confirmText}}</view>
				</view>
			</slot> 
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,computed
	} from "vue"
	const props = defineProps({
		title:{
			type:String,
			default:''
		},
		content:{
			type:String,
			default:''
		},
		showCancelButton:{
			type:Boolean,
			default:false
		},
		cancelText:{
			type:String,
			default:'取消'
		},
		cancelColor:{
			type:String,
			default:'rgba(255,255,255,0.7)'
		},
		
		confirmText:{
			type:String,
			default:'确认'
		},
		confirmColor:{
			type:String,
			default:'rgba(0, 255, 246, 1)'
		},
		showConfirmButton:{
			type:Boolean,
			default:true,
		},
		visible: {
			type: Boolean,
			default: false
		},
		needClose:{
			type:Boolean,
			default:true
		}
	})
	const emits = defineEmits(['update:visible','clickCallback'])
	const showFooter=computed(()=>{
		if(props.showCancelButton||props.showConfirmButton){
			return true
		}
		return false
	})
	const onCancel=()=>{
		if(props.needClose){
			emits('update:visible',false)
		}
		
		emits('clickCallback',false)
	}
	const onConfirm=()=>{
		if(props.needClose){
			emits('update:visible',false)
		}
		emits('clickCallback',true)
	}
</script>

<style lang="less" scoped>
	.container-modal {
		position: relative;
		width: 600rpx;
		background: #213343;
		border-radius: 40rpx;
		box-sizing: border-box;
		
		
		.cont-title{
			position: relative;
			width: 100%;
			font-size: 34rpx;
			line-height: 34rpx;
			// font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			box-sizing: border-box;
		}
		.container-body{
			position: relative;
			width: 100%;
			padding: 77rpx 32rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			// font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 45rpx;
			text-align: center;
		}
		.container-footer{
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-top: 1px solid rgba(236, 236, 236, 0.1);
			box-sizing: border-box;
			.item-button{
				position: relative;
				flex:1;
				border-right:1px solid rgba(236, 236, 236, 0.1) ;
				text-align: center;
				height: 98rpx;
				line-height: 98rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				// font-family: PingFang SC;
				font-weight: 600;
				color: rgba(255,255,255,0.7);
				&:last-child{
					border-right: 0;
				}
			}
		}

		.popup-title {
			position: relative;
			width: 100%;
			text-align: center;

			line-height: 34rpx;
			font-size: 34rpx;
			// font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;

			.icon-close {
				position: absolute;
				width: 28rpx;
				height: 28rpx;
				right: 7rpx;
				top: 50%;
				transform: translate(0, -50%);
				-webkit-transform: translate(0, -50%);
			}
		}
	}
</style>